<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>
<html>
<head>
	<title>图表管理</title>
	<meta name="decorator" content="default"/>
	<%@include file="/WEB-INF/views/include/treeview.jsp" %>
	<style type="text/css">
		.ztree {overflow:auto;margin:0;_margin-top:10px;padding:10px 0 0 10px;}
	</style>
</head>
<body>
	<sys:message content="${message}"/>
	<div id="content" class="row-fluid">
		<div id="left" class="accordion-group">
			<div class="accordion-heading">
		    	<a class="accordion-toggle">仪表盘
		    		<!-- <i class="icon-refresh pull-right  onclick="refreshTree();"></i> -->
		    		<i class="icon-folder-open pull-right" alt="添加文件夹" id="addParent"></i>
		    		<i class="icon-plus pull-right" alt="添加仪表盘" id="addLeaf"></i>
		    		<i class="icon-off pull-right" onclick="cancelCheck();"></i>
		    	</a>
		    </div>
			<div id="ztree" class="ztree"></div>
		</div>
		<div id="openClose" class="close">&nbsp;</div>
		<div id="right">
			<iframe id="quotaContent"  width="100%" height="91%" frameborder="0"></iframe>
		</div>
	</div>
	<script type="text/javascript">
		$(document).ready(function(){
			$("#addParent").bind("click", {isParent:true}, add);
			$("#addLeaf").bind("click", {isParent:false}, add);
		});
		
		var setting = {
			edit : {
				enable : true
			},
			data : {
				keep: {
					parent:true,
					leaf:true
				},
				simpleData : {
					enable : true,
					idKey : "id",
					pIdKey : "pId",
					rootPId : '0'
				}
			},
			callback : {
				//拖拽前，只能移动到文件夹
				beforeDrop : function(treeId, treeNodes, targetNode, moveType){
					return targetNode.isParent;
				},
				//拖拽事件，修改parentId
				onDrop : function(event, treeId, treeNodes, targetNode, moveType){
					var id = treeNodes[0].id;
					var parentId = targetNode.id;
					location.href = "${ctx}/ins/insDashboard/move?id="+id+"&parent.id="+parentId;
				},
				onClick : function(event, treeId, treeNode) {
					if(!treeNode.isParent){
						var id = treeNode.id == '0' ? '' : treeNode.id;
						$('#quotaContent').attr("src",
								"${ctx}/ins/insQuota/list?dashboard.id=" + id);
					}
				},
				beforeRename : function(treeId, treeNode, newName){
					if (newName.length == 0) {
						alert("节点名称不能为空.");
						var zTree = $.fn.zTree.getZTreeObj("ztree");
						setTimeout(function(){zTree.editName(treeNode)}, 10);
						return false;
					}
					return true;
				},
				onRename : function(event, treeId, treeNode){
					var name = treeNode.name;
					var id = treeNode.id == '0' ? '' : treeNode.id;
					//alert(treeNode.pId + ", " + treeNode.name);
					location.href = "${ctx}/ins/insDashboard/save?id="+id
							+"&name="+treeNode.name
							+"&parent.id="+treeNode.pId
							+"&type="+(treeNode.isParent?'1':'0');
				},
				beforeRemove : function(treeId, treeNode){
					return confirm("确认删除 节点 -- " + treeNode.name + " 吗？");
				},
				onRemove : function(event, treeId, treeNode){
					var id = treeNode.id == '0' ? '' : treeNode.id;
					location.href = "${ctx}/ins/insDashboard/delete?id="+id;
				}
			}
		};

		function add(e) {
			var zTree = $.fn.zTree.getZTreeObj("ztree");
			var isParent = e.data.isParent;
			var nodes = zTree.getSelectedNodes();
			var treeNode = nodes[0];
			if (treeNode) {
				treeNode = zTree.addNodes(treeNode, {
					id : "",
					pId : treeNode.id,
					isParent : isParent,
					name : ""
				});
			} else {
				treeNode = zTree.addNodes(null, {
					id : "",
					pId : 0,
					isParent : isParent,
					name : ""
				});
			}
			if (treeNode) {
				zTree.editName(treeNode[0]);
			} else {
				alert("请选择一个文件夹再进行新增操作");
			}
		};
		function refreshTree() {
			var url="${ctx}/ins/insDashboard/treeData";
			$.ajax({
                type: 'POST',
                url : url,
                async:false,
                success : function(data) {
                	$.fn.zTree.init($("#ztree"), setting, data).expandAll(true);
                	checkFirst();
                },
                error : function(data){
                	alertx("无权限");
                }
            });
		}
		refreshTree();

		var leftWidth = 180; // 左侧窗口大小
		var htmlObj = $("html"), mainObj = $("#main");
		var frameObj = $("#left, #openClose, #right, #right iframe");
		function wSize() {
			var strs = getWindowSize().toString().split(",");
			htmlObj.css({
				"overflow-x" : "hidden",
				"overflow-y" : "hidden"
			});
			mainObj.css("width", "auto");
			frameObj.height(strs[0] - 5);
			var leftWidth = ($("#left").width() < 0 ? 0 : $("#left").width());
			$("#right").width(
					$("#content").width() - leftWidth - $("#openClose").width()
							- 5);
			$(".ztree").width(leftWidth - 10).height(frameObj.height() - 46);
		}
		//默认选中第一个子节点并触发点击
		function checkFirst(){
			var zTree = $.fn.zTree.getZTreeObj("ztree");
			var nodes = zTree.getNodes();
			var node = check(nodes);
			if(node){
				zTree.selectNode(node);//选择点  
                zTree.setting.callback.onClick(null, zTree.setting.treeId, node);//调用事件  
			}
		}
		//递归选择第一个子节点
		function check(nodes){
			for(var i=0;i<nodes.length;i++){
				//是子节点，选中且中止方法
				if(!nodes[i].isParent){
					return nodes[i];
				//是根节点，如果有子节点，继续检查子节点，如果没有子节点，直接跳过
				}else{
					if(nodes[i].children){
						var child = check(nodes[i].children);
						if(child){
							return child;
						}
					}
				}
			}
			return false;
		}
		function cancelCheck(){
			var treeObj = $.fn.zTree.getZTreeObj("ztree");
			treeObj.cancelSelectedNode();
		}
	</script>
	<script src="${ctxStatic}/common/wsize.min.js" type="text/javascript"></script>
</body>
</html>